<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title>bootstrap</title>
			<link href="css/bootstrap.css" rel="stylesheet">
			<script src="js/jquery.min.js"></script>
			<script src="js/bootstrap.min.js"></script>
			<style>
				hr{
					border: 1px solid #666;
				}
				body{
					margin: 50px;
				}
				img{
					width: 600px;
				}
				.itany{
					height: 50px;
					width: 200px;
				}
			</style>
		</head>
		<body>
			<!-- 情境文本颜色 -->
			<p class="text-muted">itany网博</p>
			<p class="text-primary">itany网博</p>
			<p class="text-success">itany网博</p>
			<p class="text-info">itany网博</p>
			<p class="text-warning">itany网博</p>
			<p class="text-danger">itany网博</p>
			<hr>
		
			<!-- 情境背景色 -->
			<p class="bg-primary">itany网博</p>
			<p class="bg-success">itany网博</p>
			<p class="bg-info">itany网博</p>
			<p class="bg-warning">itany网博</p>
			<p class="bg-danger">itany网博</p>
			<hr>
		
			<!-- 关闭按钮、三角符号、快速浮动 --> 
			<button class="close">&times;</button>
			<br>
			<span class="caret"></span>
			<i class="caret"></i>
			<br>
			<div class="pull-left">左浮动</div>
			<div class="clearfix"></div>	
			<span>itany网博</span>
			<div class="pull-right">右浮动</div>
			<div class="center-block bg-primary itany text-center">居中</div>
			<hr>
		
			<!-- 显示或隐藏内容 -->
			<p class="show">显示</p>
			<p class="hidden">隐藏</p>
			
			<!-- 响应式工具 -->
			<div class="hidden-xs">超小屏幕时隐藏</div>
			<div class="visible-md-block">中等屏幕时显示为块级元素</div>
			<div class="visible-sm-inline">小屏幕时显示为内联元素</div>
			<span>abc</span>
	</body>
</html>
